import React, {FC, useEffect, useRef, useState} from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Image,
  TextInput,
  LayoutAnimation,
} from 'react-native';
import icon_arrow from '../../assets/icon_arrow.png';
import icon_search from '../../assets/icon_search.png';
import {useNavigation} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import {RootStackParamList} from '../../../App';
type PropsType = {};
const SearchGoods: FC<PropsType> = () => {
  const inputRef = useRef<TextInput>(null);
  const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
  const [showBack, setShowBack] = useState<boolean>(false);
  useEffect(() => {
    setTimeout(() => {
      LayoutAnimation.easeInEaseOut();
      setShowBack(true);
      inputRef.current?.focus();
    }, 100);
  }, []);

  const onBackPress = () => {
    LayoutAnimation.easeInEaseOut();
    setShowBack(false);
    inputRef.current?.blur();
    setTimeout(() => {
      navigation.pop();
    }, 300);
  };
  return (
    <View style={styles.root}>
      <View style={styles.titleLayout}>
        {showBack && (
          <TouchableOpacity onPress={onBackPress} style={styles.backBtn}>
            <Image source={icon_arrow} style={styles.backImg} />
          </TouchableOpacity>
        )}

        <View style={styles.searchLayout}>
          <Image source={icon_search} style={styles.searchImg} />
          <TextInput
            ref={inputRef}
            style={styles.searchTxt}
            placeholder="纯粮小麦粉"
            placeholderTextColor="#bbb"
          />
        </View>
        <Text style={styles.searchBtn}>搜索</Text>
      </View>
      <TouchableOpacity style={styles.emptyLayout} onPress={onBackPress} />
    </View>
  );
};

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: '100%',
    backgroundColor: 'transparent',
  },
  titleLayout: {
    width: '100%',
    height: 40,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  backBtn: {
    height: '100%',
    paddingLeft: 16,
    justifyContent: 'center',
  },
  backImg: {
    width: 20,
    height: 20,
    resizeMode: 'contain',
  },
  searchLayout: {
    height: 32,
    flex: 1,
    backgroundColor: '#F0F0F0',
    borderRadius: 16,
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 16,
    marginLeft: 16,
  },
  searchImg: {
    width: 18,
    height: 18,
    resizeMode: 'contain',
  },
  searchTxt: {
    fontSize: 14,
    color: '#bbb',
    marginLeft: 6,
    paddingHorizontal: 8,
    paddingVertical: 0,
  },
  searchBtn: {
    fontSize: 16,
    color: '#666',
    marginHorizontal: 12,
  },
  emptyLayout: {
    width: '100%',
    flex: 1,
  },
});
export default SearchGoods;
